<template>
  <div class="app-container calendar-list-container">
    <el-tabs type="border-card">
      <el-tab-pane label="未生成备料列表">
        <!--未备料列表-->
        <!--<div style="height: 30px; text_align: center">未生成备料列表</div>-->
        <!--查询更多-->
        <div class="filter-container">
          <el-row>
            <el-col :span="6">
              <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                         @click="createPrepare" icon="el-icon-edit">生成备料任务
              </el-button>
            </el-col>
            <el-col :span="18" style="text-align: right">
              <el-input size="small" style="width: 200px" class="filter-item more-search" placeholder="指令号-回车查询"
                        v-model="searchNot.condition.ownerOrderNo"
                        @keyup.enter.native="notList"></el-input>
              <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline"
              @click="moreClickNot">更多</el-button>
              <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-checkbox-group v-model="withoutColumnCheckList">
                      <el-checkbox label="houseName">仓库</el-checkbox>
                      <el-checkbox label="noticeNo">通知单号</el-checkbox>
                      <el-checkbox label="ownerOrderNo">指令号</el-checkbox>
                      <el-checkbox label="providerName">承运商</el-checkbox>
                      <el-checkbox label="plateNumber">板车号</el-checkbox>
                      <el-checkbox label="shipmentCreate">调度时间</el-checkbox>
                      <el-checkbox label="planTime">计划装车时间</el-checkbox>
                      <!--<el-checkbox label="prepareStatus">备料状态</el-checkbox>-->
                      <el-checkbox label="noticeHeadStatus">出库状态</el-checkbox>
                      <el-checkbox label="destLocationName">目的地</el-checkbox>
                      <el-checkbox label="plateNumber">车牌</el-checkbox>
                      <el-checkbox label="driverName">司机</el-checkbox>
                      <el-checkbox label="driverPhone">司机手机号</el-checkbox>
                      <el-checkbox label="finishTime">完成时间</el-checkbox>
                    </el-checkbox-group>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
          <div style="clean:both"></div>
          <!--更多内容-->
          <div v-show="moreSearchVisibleNot" style="height: auto;margin-top: 10px;">
            <el-form ref="form" :model="searchNot.condition" label-width="100px" :inline="true">
              <el-form-item label="请输入指令号">
                <el-input placeholder="请输入指令号" class="w200" clearable v-model="searchNot.condition.ownerOrderNo"></el-input>
              </el-form-item>
              <el-form-item label="车架号">
                <!--<el-input placeholder="请输入车架号" class="w200" clearable v-model="searchNot.condition.lotNo1"></el-input>-->
                <el-input type="textarea" :rows="2" style="width: 250px"
                          v-model="searchNot.condition.lotNo1"  placeholder="请输入车架号, 以逗号来分隔"></el-input>
              </el-form-item>
              <el-form-item label="承运商">
                <el-input placeholder="请输入承运商" class="w200" clearable v-model="searchNot.condition.providerName"></el-input>
              </el-form-item>
              <!--<el-form-item label="备料状态">-->
                <!--<el-select v-model="search.condition.preparationStatus" placeholder="请选择备料状态">-->
                  <!--<el-option label="未选择" value=""></el-option>-->
                  <!--<el-option label="未备料" value="10"></el-option>-->
                  <!--<el-option label="开始执行" value="20"></el-option>-->
                  <!--<el-option label="部分备料" value="30"></el-option>-->
                  <!--<el-option label="全部完成" value="40"></el-option>-->
                <!--</el-select>-->
              <!--</el-form-item>-->
              <el-form-item label="出库状态">
                <el-select v-model="searchNot.condition.outShipStatus" placeholder="请选择出库状态">
                  <el-option label="未选择" value=""></el-option>
                  <el-option label="未出库" value="10"></el-option>
                  <el-option label="部分出库" value="20"></el-option>
                  <el-option label="全部出库" value="30"></el-option>
                  <el-option label="取消出库" value="50"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="调度时间:">
                <el-date-picker class="w200" v-model="searchNot.condition.startDate" type="datetime" placeholder="选择日期时间"  value-format="yyyy-MM-dd HH:mm:ss"
                                align="right" :picker-options="timePicker"></el-date-picker>
                <span style="padding: 0 6px">至</span>
                <el-date-picker class="w200" v-model="searchNot.condition.endDate" type="datetime" placeholder="选择日期时间"  value-format="yyyy-MM-dd HH:mm:ss"
                                align="right" :picker-options="timePicker"></el-date-picker>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="notList" style="margin-left: 10px">查询</el-button>
                <el-button type="primary" @click="resetNot">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!--列表-->
        <el-table ref="notPrepareListTable" :data="notPreparationList" v-loading="notListLoading" element-loading-text="加载中" border
                  fit highlight-current-row @row-click="getPreparationDetailNotFunc"
                  style="width: 100%;margin-top:5px" @selection-change="handleSelectionChangeNot">
          <el-table-column type="selection" width="35"></el-table-column>
          <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in withoutColumnList'
                           :label="value.title">
            <template slot-scope="scope">
              <div v-if="value.key === 'prepareStatus'">{{scope.row[value.key] | prepareHeadStatusFilter}}</div>
              <div v-else-if="value.key === 'noticeHeadStatus'">{{scope.row[value.key] | noticeHeadStatusFilter}}</div>
              <div v-else>{{ scope.row[value.key] }}</div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div v-show="!notListLoading" class="pagination-container">
          <el-pagination :current-page.sync="searchNot.current" :page-sizes="[10,20,30,50]" @size-change="handleSizeChangeNot"
                         @current-change="handleCurrentChangeNot"
                         :page-size="searchNot.size" :total="searchNot.total"
                         layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已生成备料列表">
        <!--查询更多-->
        <div class="filter-container">
          <el-row>
            <el-col :span="6">
              <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                         @click="changePrepare" icon="el-icon-edit">备料任务变更
              </el-button>
              <el-button class="filter-item" size="small" style="margin-left: 10px;" type="primary" v-waves
                        :loading="downloadLoading" icon="el-icon-download" @click="exportExcel">导出
              </el-button>
            </el-col>
            <el-col :span="18" style="text-align: right">
              <el-input size="small" style="width: 200px" class="filter-item more-search" placeholder="指令号-回车查询"
                        v-model="search.condition.ownerOrderNo"
                        @keyup.enter.native="list"></el-input>
              <el-button class="filter-item" size="small" type="primary" v-waves icon="el-icon-circle-plus-outline"
                         @click="moreClick">更多
              </el-button>
              <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-checkbox-group v-model="columnCheckList">
                      <el-checkbox label="houseName">仓库</el-checkbox>
                      <el-checkbox label="noticeNo">通知单号</el-checkbox>
                      <el-checkbox label="ownerOrderNo">指令号</el-checkbox>
                      <el-checkbox label="headId">备料单号</el-checkbox>
                      <el-checkbox label="providerName">承运商</el-checkbox>
                      <el-checkbox label="plateNumber">板车号</el-checkbox>
                      <el-checkbox label="shipmentCreate">调度时间</el-checkbox>
                      <el-checkbox label="planTime">计划装车时间</el-checkbox>
                      <el-checkbox label="loadingArea">备车道</el-checkbox>
                      <el-checkbox label="prepareStatus">备料状态</el-checkbox>
                      <el-checkbox label="noticeHeadStatus">出库状态</el-checkbox>
                      <el-checkbox label="destLocationName">目的地</el-checkbox>
                      <el-checkbox label="plateNumber">车牌</el-checkbox>
                      <el-checkbox label="driverName">司机</el-checkbox>
                      <el-checkbox label="driverPhone">司机手机号</el-checkbox>
                      <el-checkbox label="finishTime">完成时间</el-checkbox>
                    </el-checkbox-group>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
          <div style="clean:both"></div>
          <!--更多内容-->
          <div v-show="moreSearchVisible" style="height: auto;margin-top: 10px;">
            <el-form ref="form" :model="search.condition" label-width="100px" :inline="true">
              <el-form-item label="请输入指令号">
                <el-input placeholder="请输入指令号" class="w200" clearable v-model="search.condition.ownerOrderNo"></el-input>
              </el-form-item>
              <el-form-item label="车架号">
                <!--<el-input placeholder="请输入车架号" class="w200" clearable v-model="search.condition.lotNo1"></el-input>-->
                <el-input type="textarea" :rows="2" style="width: 250px"
                          v-model="search.condition.lotNo1"  placeholder="请输入车架号, 以逗号来分隔"></el-input>
              </el-form-item>
              <el-form-item label="承运商">
                <el-input placeholder="请输入承运商" class="w200" clearable v-model="search.condition.providerName"></el-input>
              </el-form-item>
              <el-form-item label="备料状态">
                <el-select v-model="search.condition.preparationStatus" placeholder="请选择备料状态">
                  <el-option label="未选择" value=""></el-option>
                  <el-option label="未备料" value="10"></el-option>
                  <el-option label="开始执行" value="20"></el-option>
                  <el-option label="部分备料" value="30"></el-option>
                  <el-option label="全部完成" value="40"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="出库状态">
                <el-select v-model="search.condition.outShipStatus" placeholder="请选择出库状态">
                  <el-option label="未选择" value=""></el-option>
                  <el-option label="未出库" value="10"></el-option>
                  <el-option label="部分出库" value="20"></el-option>
                  <el-option label="全部出库" value="30"></el-option>
                  <el-option label="取消出库" value="50"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="调度时间:">
                <el-date-picker class="w200" v-model="search.condition.startDate" type="datetime" placeholder="选择日期时间"  value-format="yyyy-MM-dd HH:mm:ss"
                                align="right" :picker-options="timePicker"></el-date-picker>
                <span style="padding: 0 6px">至</span>
                <el-date-picker class="w200" v-model="search.condition.endDate" type="datetime" placeholder="选择日期时间"  value-format="yyyy-MM-dd HH:mm:ss"
                                align="right" :picker-options="timePicker"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="list" style="margin-left: 10px">查询</el-button>
                <el-button type="primary" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!--备料列表-->
        <el-table ref="prepareListTable" :data="preparationList" v-loading="listLoading" element-loading-text="加载中" border
                  fit highlight-current-row @row-click="getPreparationDetailFunc"
                  style="width: 100%;margin-top:5px" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="35"></el-table-column>
          <el-table-column :key="key" align="center" :width="value.width" v-for='(value,key) in columnList'
                           :label="value.title">
            <template slot-scope="scope">
              <div v-if="value.key === 'prepareStatus'">{{scope.row[value.key] | prepareHeadStatusFilter}}</div>
              <div v-else-if="value.key === 'noticeHeadStatus'">{{scope.row[value.key] | noticeHeadStatusFilter}}</div>
              <div v-else>{{ scope.row[value.key] }}</div>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination :current-page.sync="search.current" :page-sizes="[10,20,30,50]" @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :page-size="search.size" :total="search.total"
                         layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div style="height: 30px;"></div>
    <!--备料明细信息列表-->
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-dropdown trigger="click" :hide-on-click=false style="float: right;margin-left: 10px">
            <span class="el-dropdown-link">
              <el-button class="filter-item" size="small" type="primary" v-waves>
                选择列
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-checkbox-group v-model="infoColumnCheckList">
                <el-checkbox label="cusOrderNo">客户订单号</el-checkbox>
                <el-checkbox label="cusWaybillNo">客户运单号</el-checkbox>
                <el-checkbox label="lotNo1">车架号</el-checkbox>
                <el-checkbox label="locationNo">库位</el-checkbox>
                <el-checkbox label="materielId">车型名称</el-checkbox>
                <el-checkbox label="ownerId">客户</el-checkbox>
                <el-checkbox label="dealerName">经销商</el-checkbox>
                <el-checkbox label="destAddress">目的地</el-checkbox>
                <el-checkbox label="materielName">车型描述</el-checkbox>
                <el-checkbox label="preparationStatus">任务状态</el-checkbox>
                <el-checkbox label="preparetor">备料司机</el-checkbox>
                <el-checkbox label="startTime">开始时间</el-checkbox>
                <el-checkbox label="finishTime">完成时间</el-checkbox>
                <el-checkbox label="destLocationCity">目的市</el-checkbox>
                <el-checkbox label="destLocationCounty">目的县</el-checkbox>
                <el-checkbox label="destLocationGid">地址编码</el-checkbox>
              </el-checkbox-group>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>

    <!--明细表-->
    <el-table ref="prepareInfoTableInfo" :data="prepareInfoList" v-loading="infoLoading" element-loading-text="加载中" border
              fit highlight-current-row
              style="width: 100%;margin-top:5px;margin-bottom: 200px" @selection-change="handleSelectionChangeInfo">
      <el-table-column type="selection" width="35"></el-table-column>
      <el-table-column :key="key" align="center" v-for='(value,key) in infoColumnList' :label="value.title">
        <template slot-scope="scope">
          <div v-if="value.key === 'preparationStatus'">{{scope.row[value.key] | prepareLineStatusFilter}}</div>
          <div v-else-if="value.key === 'lineStatus'">{{scope.row[value.key] | noticeLineStatusFilter}}</div>
          <div v-else>{{ scope.row[value.key] }}</div>
        </template>
      </el-table-column>
    </el-table>

    <!--创建备料弹窗-->
    <el-dialog title="创建备料计划" :visible.sync="dialogVisible" width="50%" :before-close="handleDialogClose">

      <el-form ref="form" label-width="120px" :inline="true">
        <el-form-item label="装车道">
          <el-input placeholder="请填写装车道" class="w200" width="120px" v-model="inputParam.prepareLane"></el-input>
        </el-form-item>
        <el-form-item label="计划装车时间">
          <el-date-picker class="w200" v-model="inputParam.planTime" type="datetime" placeholder="选择日期时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          align="right" :picker-options="timePicker"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmCreatePrepare" :disabled = "confirmDisable">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script type="text/ecmascript-6">
  import * as outboundPrepareAPI from '@/api/outbound/outboundPrepare'
  import waves from '@/directive/waves' // 水波纹指令
  const defaultColumn = [
    { key: 'houseName', title: '仓库', width: '120px' },
    { key: 'noticeNo', title: '通知单号', width: '140px' },
    { key: 'ownerOrderNo', title: '指令号', width: '140px' },
    { key: 'headId', title: '备料单号', width: '140px' },
    { key: 'providerName', title: '承运商', width: '120px' },
    { key: 'plateNumber', title: '板车号', width: '140px' },
    { key: 'shipmentCreate', title: '调度时间', width: '200px' },
    { key: 'planTime', title: '计划装车时间', width: '200px' },
    { key: 'loadingArea', title: '备车道', width: '120px' },
    { key: 'prepareStatus', title: '备料状态', width: '120px' },
    { key: 'noticeHeadStatus', title: '出库状态', width: '120px' },
    { key: 'destLocationName', title: '目的地', width: '200px' },
    { key: 'plateNumber', title: '车牌', width: '200px' },
    { key: 'driverName', title: '司机', width: '120px' },
    { key: 'driverPhone', title: '司机手机号', width: '140px' },
    { key: 'finishTime', title: '完成时间', width: '200px', fixed: 'right' }
  ]
  const defaultWithoutColumn = [
    { key: 'houseName', title: '仓库', width: '120px' },
    { key: 'noticeNo', title: '通知单号', width: '140px' },
    { key: 'ownerOrderNo', title: '指令号', width: '140px' },
    { key: 'providerName', title: '承运商', width: '140px' },
    { key: 'plateNumber', title: '板车号', width: '140px' },
    { key: 'shipmentCreate', title: '调度时间', width: '200px' },
    { key: 'planTime', title: '计划装车时间', width: '200px' },
    { key: 'prepareStatus', title: '备料状态', width: '120px' },
    { key: 'noticeHeadStatus', title: '出库状态', width: '120px' },
    { key: 'destLocationName', title: '目的地', width: '200px' },
    { key: 'plateNumber', title: '车牌', width: '200px' },
    { key: 'driverName', title: '司机', width: '120px' },
    { key: 'driverPhone', title: '司机手机号', width: '140px' },
    { key: 'finishTime', title: '完成时间', width: '200px', fixed: 'right' }
  ]
  const defaultInfoColumn = [
    { key: 'cusOrderNo', title: '客户订单号', width: 120 },
    { key: 'cusWaybillNo', title: '客户运单号', width: 120 },
    { key: 'lotNo1', title: '车架号', width: 200 },
    { key: 'locationNo', title: '库位', width: 120 },
    { key: 'materielId', title: '车型名称', width: 140 },
    { key: 'ownerId', title: '客户', width: 200 },
    { key: 'dealerName', title: '经销商', width: 200 },
    { key: 'destAddress', title: '目的地', width: 200 },
    { key: 'materielName', title: '车型描述', width: 200 },
    { key: 'preparationStatus', title: '任务状态', width: 120 },
    { key: 'preparetor', title: '备料司机', width: 120 },
    { key: 'startTime', title: '开始时间', width: 200 },
    { key: 'finishTime', title: '完成时间', width: 200 },
    { key: 'destLocationCity', title: '目的市', width: 120 },
    { key: 'destLocationCounty', title: '目的县', width: 200 },
    { key: 'destLocationGid', title: '地址编码', width: 200 }
  ]

  export default {
    directives: {
      waves
    },
    data() {
      return {
        search: {
          current: 1,
          size: 10,
          total: 0,
          condition: {
            lotNo1: null,
            noticeHeadNo: null,
            ownerOrderNo: null,
            preparationStatus: null,
            storeHouseId: null
          }
        },
        searchNot: {
          current: 1,
          size: 10,
          total: 0,
          condition: {
            lotNo1: null,
            noticeHeadNo: null,
            ownerOrderNo: null,
            preparationStatus: null,
            storeHouseId: null
          }
        },
        inputParam: {
          planTime: null,
          prepareLane: null,
          noticeHeadId: null
        },
        columnList: defaultColumn,
        columnCheckList: [
          'houseName',
          'noticeNo',
          'ownerOrderNo',
          'headId',
          'providerName',
          'plateNumber',
          'shipmentCreate',
          'planTime',
          'loadingArea',
          'prepareStatus',
          'noticeHeadStatus',
          'destLocationName',
          'plateNumber',
          'driverName',
          'driverPhone',
          'finishTime'
        ],
        withoutColumnList: defaultWithoutColumn,
        withoutColumnCheckList: [
          'houseName',
          'noticeNo',
          'ownerOrderNo',
          'providerName',
          'plateNumber',
          'shipmentCreate',
          'planTime',
          'prepareStatus',
          'noticeHeadStatus',
          'destLocationName',
          'plateNumber',
          'driverName',
          'driverPhone',
          'finishTime'
        ],
        infoColumnList: defaultInfoColumn,
        infoColumnCheckList: [
          'cusOrderNo',
          'cusWaybillNo',
          'lotNo1',
          'locationNo',
          'materielId',
          'ownerId',
          'dealerName',
          'destAddress',
          'materielName',
          'preparationStatus',
          'preparetor',
          'startTime',
          'destLocationCity',
          'destLocationCounty',
          'destLocationGid',
          'finishTime'
        ],
        moreSearchVisible: false, // 已生成
        moreSearchVisibleNot: false, // 未生成
        multipleSelection: [],
        multipleSelectionNot: [],
        selectRow: {}, // 已生成
        selectRowNot: {}, // 未生成
        preparationList: [],
        downloadLoading: false,
        notPreparationList: [],
        prepareInfoList: [], // 明细列表
        selectRowInfo: [], // 明细选中row
        listLoading: false,
        notListLoading: false,
        infoLoading: false,
        tableData: [],
        tableHeader: [],
        dialogVisible: false,
        confirmDisable: false,
        timePicker: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        value1: '',
        value2: '',
        value3: ''
      }
    },
    created() {
      this.list()
      this.notList()
    },
    watch: {
      columnCheckList(valArr) {
        this.columnList = defaultColumn.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      },
      withoutColumnCheckList(valArr) {
        this.withoutColumnList = defaultColumn.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      },
      infoColumnCheckList(valArr) {
        this.infoColumnList = defaultInfoColumn.filter(v => {
          for (let i = 0; i < valArr.length; i++) {
            if (v.key === valArr[i]) {
              return v
            }
          }
        })
      }
    },
    methods: {
      list() {
        const that = this
        // 更多
        const queryParam = {}
        if (this.moreSearchVisible) {
          queryParam.condition = that.search.condition
        } else {
          queryParam.condition = {
            ownerOrderNo: that.search.condition.ownerOrderNo
          }
        }
        // 分页
        queryParam.current = this.search.current
        queryParam.size = this.search.size
        queryParam.condition.storeHouseId = this.$store.getters.currentStorehouse.id
        that.listLoading = true
        outboundPrepareAPI.getPreparationList(queryParam).then(result => {
          that.listLoading = false
          if (result.code === 0) {
            this.preparationList = result.data.records
            this.search.total = result.data.total
          } else {
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      exportExcel() {
        // 数据导出
        // const queryParam = {}
        // queryParam.condition = this.search.condition
        // queryParam.current = this.search.current
        // queryParam.size = this.search.total
        // queryParam.condition.storeHouseId = this.$store.getters.currentStorehouse.id
        // this.downloadLoading = true
        // outboundPrepareAPI.getPreparationList(queryParam).then(result => {
        //   this.downloadLoading = false
        //   if (result.code === 0) {
        this.downloadData = this.multipleSelection
        if (this.downloadData.length) {
          const arr = this.changeStatus()
          require.ensure([], () => {
            const { export_json_to_excel } = require('@/vendor/Export2Excel')
            const tHeader = ['车队', '板车号', '入场时间', '备车道', '司机', '电话', '现场协调', '领钥匙签字']
            const filterVal = ['providerName', 'plateNumber', 'planTime', 'loadingArea', 'driverName', 'driverPhone']
            const data = this.formatJson(filterVal, arr)
            this.filename = '排班记录表'
            export_json_to_excel(tHeader, data, this.filename)
          })
        } else {
          this.$message({
            title: '信息提示',
            message: '请选择要导出的数据',
            type: 'error',
            duration: 2000
          })
        }
        // })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      changeStatus() {
        return this.downloadData.map(v => {
          if (v.prepareStatus === '10') {
            v.prepareStatus = '未备料'
          } else if (v.prepareStatus === '20') {
            v.prepareStatus = '开始执行'
          } else if (v.prepareStatus === '30') {
            v.prepareStatus = '部分备料'
          } else if (v.prepareStatus === '40') {
            v.prepareStatus = '全部完成'
          }
          if (v.noticeHeadStatus === '10') {
            v.noticeHeadStatus = '未出库'
          } else if (v === '20') {
            v.noticeHeadStatus = '部分出库'
          } else if (v === '30') {
            v.noticeHeadStatus = '全部出库'
          } else if (v === '40') {
            v.noticeHeadStatus = '关闭出库'
          } else if (v === '50') {
            v.noticeHeadStatus = '取消出库'
          }
          return v
        })
      },
      notList() {
        const that = this
        // 为备料列表更多
        const queryParam2 = {}
        if (this.moreSearchVisibleNot) {
          queryParam2.condition = that.searchNot.condition
        } else {
          queryParam2.condition = {
            ownerOrderNo: that.searchNot.condition.ownerOrderNo
          }
        }
        // 分页
        queryParam2.current = this.searchNot.current
        queryParam2.size = this.searchNot.size
        queryParam2.condition.storeHouseId = this.$store.getters.currentStorehouse.id
        this.notListLoading = true
        outboundPrepareAPI.withoutPreparationList(queryParam2).then(result => {
          if (result.code === 0) {
            this.notPreparationList = result.data.records
            this.searchNot.total = result.data.total
            that.notListLoading = false
          } else {
            that.notListLoading = false
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      reset() {
        this.search.current = 1
        this.search.size = 10
        this.search.condition = {
          storeHouseId: this.$store.getters.currentStorehouse.id,
          lotNo1: null,
          providerName: null,
          noticeHeadNo: null,
          headSourceNo: null,
          preparationStatus: null
        }
        this.list()
      },
      resetNot() {
        this.searchNot.current = 1
        this.searchNot.size = 10
        this.searchNot.condition = {
          storeHouseId: this.$store.getters.currentStorehouse.id,
          lotNo1: null,
          providerName: null,
          noticeHeadNo: null,
          headSourceNo: null,
          preparationStatus: null
        }
        this.notList()
      },
      // 已备料 行选中
      getPreparationDetailFunc(row, event, column) {
        this.selectRow = row
        if (row) {
          this.$refs.prepareListTable.clearSelection()
          setTimeout(() => {
            this.$refs.prepareListTable.toggleRowSelection(row, true)
            this.getPreparationDetail(row, null, null)
          }, 200)
        }
      },
      // 未备料 行选中
      getPreparationDetailNotFunc(row, event, column) {
        this.selectRowNot = row
        if (row) {
          this.$refs.notPrepareListTable.clearSelection()
          setTimeout(() => {
            this.$refs.notPrepareListTable.toggleRowSelection(row, true)
            this.getPreparationDetail(row, null, null)
          }, 200)
        }
      },
      getPreparationDetail(row, event, column) {
        const noticeHeadId = row.noticeHeadId
        const headId = row.headId
        this.infoLoading = true
        const queryParam = {}
        queryParam.noticeHeadId = noticeHeadId
        queryParam.headId = headId
        outboundPrepareAPI.getPreparationDetail(queryParam).then(result => {
          if (result.code === 0) {
            this.prepareInfoList = result.data
            this.infoLoading = false
          } else {
            this.infoLoading = false
            this.list()
            this.$notify({
              title: '信息提示',
              message: result.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      // 创建 =》multipleSelectionNot
      createPrepare() {
        const that = this
        const selects = that.multipleSelectionNot
        if (!selects || selects.length === 0) {
          this.$message({
            title: '错误提示',
            message: '请选择对应的头数据备料',
            type: 'warning',
            duration: 2000
          })
        } else if (selects.length > 1) {
          this.$message({
            title: '错误提示',
            message: '只能选择一条头数据备料',
            type: 'warning',
            duration: 2000
          })
        } else {
          that.dialogVisible = true
        }
      },
      confirmCreatePrepare() {
        const that = this
        const selects = that.multipleSelectionNot
        if (selects.length === 1 && that.inputParam.planTime && that.inputParam.prepareLane) {
          that.inputParam.noticeHeadId = selects[0].noticeHeadId
          if (that.selectRowInfo.length > 0) {
            const ids = []
            for (let c = 0; c < this.selectRowInfo.length; c++) {
              ids.push(this.selectRowInfo[c].lineId)
            }
            that.inputParam.lineIds = ids
            that.confirmDisable = true
            outboundPrepareAPI.singlePreparation(that.inputParam).then(result => {
              that.confirmDisable = false
              if (result.code === 0) {
                this.$message({
                  title: '生成备料任务成功',
                  message: '备料任务成功',
                  type: 'success',
                  duration: 2000
                })
                that.handleDialogClose()
                that.resetNot()
              }
            })
          } else {
            that.confirmDisable = true
            outboundPrepareAPI.createPreparation(that.inputParam).then(result => {
              that.confirmDisable = false
              if (result.code === 0) {
                this.$message({
                  title: '生成备料任务成功',
                  message: '生成备料任务成功',
                  type: 'success',
                  duration: 2000
                })
                that.handleDialogClose()
                that.resetNot()
              }
            })
          }
        } else {
          this.$message({
            title: '错误提示',
            message: '请填写装车道或计划装车时间',
            type: 'warning',
            duration: 2000
          })
        }
      },
      // 变更 =》multipleSelection
      changePrepare() {
        // 注释
        const selects = this.multipleSelection
        if (!selects || selects.length === 0) {
          this.$message({
            title: '错误提示',
            message: '请选择要变更备料计划的数据',
            type: 'warning',
            duration: 2000
          })
        } else if (selects.length > 1) {
          this.$message({
            title: '错误提示',
            message: '只能选择一行数据',
            type: 'warning',
            duration: 2000
          })
        } else {
          const inputParams = {}
          inputParams.noticeHeadId = selects[0].noticeHeadId
          inputParams.storeHouseId = this.$store.getters.currentStorehouse.id
          outboundPrepareAPI.changePreparation(inputParams).then(result => {
            if (result.code === 0) {
              this.$notify({
                title: '操作成功',
                message: result.message,
                type: 'info',
                duration: 2000
              })
              this.list()
            }
          })
        }
      },
      // 明细列表-列选中
      handleSelectionChangeInfo(val) {
        this.selectRowInfo = val
      },
      moreClick() {
        this.moreSearchVisible = !this.moreSearchVisible
      },
      selected(data) {
        this.tableData = data.results
        this.tableHeader = data.header
      },
      handleSelectionChange(val) {
        const that = this
        that.multipleSelection = val
      },
      handleSizeChange(val) {
        // 分页size变化
        this.search.size = val
        this.list()
      },
      handleCurrentChange(val) {
        // 分页当前页变化
        this.search.current = val
        this.list()
      },
      moreClickNot() {
        this.moreSearchVisibleNot = !this.moreSearchVisibleNot
      },
      // 未备料列表 行勾选
      handleSelectionChangeNot(val) {
        const that = this
        that.multipleSelectionNot = val
      },
      handleSizeChangeNot(val) {
        // 分页size变化
        this.searchNot.size = val
        this.notList()
      },
      handleCurrentChangeNot(val) {
        // 分页当前页变化
        this.searchNot.current = val
        this.notList()
      },
      handleDialogClose() {
        // 关闭
        this.inputParam.noticeHeadId = null
        this.inputParam.planTime = null
        this.inputParam.prepareLane = null
        this.dialogVisible = false
        this.confirmDisable = false
      }
    }
  }
</script>
<style scoped>

</style>
